<script setup>
import { ref, onMounted } from 'vue'

// 传承人数据
const artists = [
  {
    id: 1,
    name: '汪天稳',
    title: '国家级非物质文化遗产项目代表性传承人',
    region: '陕西',
    profile: '汪天稳，1949年生，陕西华县人，中国工艺美术大师，国家级非物质文化遗产项目皮影戏（华县皮影戏）代表性传承人。他从13岁开始学习皮影雕刻，至今已有60余年的从艺经历。汪天稳的皮影作品刀法精湛，造型优美，色彩鲜艳，被誉为"皮影雕刻活化石"。',
    achievements: [
      '2006年被授予"中国工艺美术大师"称号',
      '2009年入选国家级非物质文化遗产项目代表性传承人',
      '作品被中国国家博物馆、美国大都会博物馆等收藏',
      '出版多部皮影艺术专著',
      '培养了大批皮影雕刻人才'
    ],
    image: 'https://picsum.photos/id/220/600/700'
  },
  {
    id: 2,
    name: '范正安',
    title: '国家级非物质文化遗产项目代表性传承人',
    region: '山东',
    profile: '范正安，1945年生，山东泰安人，国家级非物质文化遗产项目皮影戏（泰山皮影戏）代表性传承人。他是泰山皮影"十不闲"技艺的唯一传人，能够同时操作影人、演奏乐器和演唱，技艺精湛。范正安致力于皮影戏的传承和创新，将传统技艺与现代元素相结合。',
    achievements: [
      '2008年入选国家级非物质文化遗产项目代表性传承人',
      '创立"泰山皮影艺术研究院"',
      '发明"十不闲"皮影表演技艺',
      '多次赴国外进行文化交流演出',
      '在国内外获得多项艺术奖项'
    ],
    image: 'https://picsum.photos/id/221/600/700'
  },
  {
    id: 3,
    name: '陆树铭',
    title: '皮影戏表演艺术家',
    region: '北京',
    profile: '陆树铭，1956年生，北京人，著名皮影戏表演艺术家，国家级非物质文化遗产项目皮影戏（北京皮影戏）代表性传承人。他的表演风格细腻生动，擅长塑造各种人物形象。陆树铭不仅在国内享有盛誉，还多次赴国外进行文化交流，为推广中国皮影艺术做出了重要贡献。',
    achievements: [
      '2012年入选国家级非物质文化遗产项目代表性传承人',
      '担任北京皮影剧团团长',
      '主演多部经典皮影戏作品',
      '致力于皮影艺术的普及和教育',
      '获得"中国民间文化杰出传承人"称号'
    ],
    image: 'https://picsum.photos/id/222/600/700'
  },
  {
    id: 4,
    name: '江国庆',
    title: '皮影雕刻艺术家',
    region: '湖北',
    profile: '江国庆，1958年生，湖北云梦人，国家级非物质文化遗产项目皮影戏（云梦皮影戏）代表性传承人。他擅长皮影雕刻和表演，作品造型独特，工艺精湛。江国庆致力于云梦皮影的保护和传承，建立了皮影艺术传承基地，培养了大批年轻传承人。',
    achievements: [
      '2018年入选国家级非物质文化遗产项目代表性传承人',
      '创立"云梦皮影艺术传承基地"',
      '作品多次在国内外展览中获奖',
      '出版《云梦皮影艺术》专著',
      '推动皮影艺术进校园活动'
    ],
    image: 'https://picsum.photos/id/223/600/700'
  },
  {
    id: 5,
    name: '周树飞',
    title: '皮影戏表演艺术家',
    region: '河北',
    profile: '周树飞，1962年生，河北唐山人，国家级非物质文化遗产项目皮影戏（唐山皮影戏）代表性传承人。他从小跟随父亲学习皮影表演，精通皮影操纵和演唱技巧。周树飞的表演风格独特，擅长表现各种人物的情感和性格，深受观众喜爱。',
    achievements: [
      '2014年入选国家级非物质文化遗产项目代表性传承人',
      '担任唐山皮影剧团副团长',
      '创新皮影表演形式，融入现代元素',
      '培养了大批年轻皮影演员',
      '多次参加国际文化交流活动'
    ],
    image: 'https://picsum.photos/id/224/600/700'
  },
  {
    id: 6,
    name: '张艳玲',
    title: '新生代皮影艺术家',
    region: '四川',
    profile: '张艳玲，1985年生，四川阆中人，新生代皮影艺术家，四川省非物质文化遗产项目皮影戏（川北皮影戏）代表性传承人。她自幼跟随父亲学习皮影技艺，精通皮影雕刻和表演。张艳玲致力于传统皮影艺术的创新和年轻化，通过现代媒体推广皮影文化。',
    achievements: [
      '2020年入选四川省非物质文化遗产项目代表性传承人',
      '创立"川北皮影艺术工作室"',
      '将皮影艺术与现代设计相结合',
      '在短视频平台推广皮影文化，拥有百万粉丝',
      '获得"中国青年非遗传承人"称号'
    ],
    image: 'https://picsum.photos/id/225/600/700'
  }
]

// 当前选中的艺人
const selectedArtist = ref(null)

// 打开艺人详情
const openArtistDetail = (artist) => {
  selectedArtist.value = artist
}

// 关闭艺人详情
const closeArtistDetail = () => {
  selectedArtist.value = null
}

// 传承人访谈数据
const interviews = [
  {
    id: 1,
    artist: '汪天稳',
    question: '您是如何开始学习皮影雕刻的？',
    answer: '我13岁开始学习皮影雕刻，当时是因为家里穷，想找一门手艺谋生。跟着当地的老艺人学习，一开始只是做一些简单的雕刻，后来逐渐掌握了各种技巧。学习皮影雕刻需要耐心和毅力，有时候一个复杂的影人要刻上几天甚至几周。'
  },
  {
    id: 2,
    artist: '范正安',
    question: '您如何看待皮影戏的传承和创新？',
    answer: '传承是基础，创新是发展的动力。我们要先把传统的技艺和剧目完整地保存下来，然后再考虑如何创新。创新不是简单地改变传统，而是在尊重传统的基础上，融入现代元素，让更多的年轻人喜欢上皮影戏。'
  },
  {
    id: 3,
    artist: '张艳玲',
    question: '作为年轻一代传承人，您有什么新的尝试？',
    answer: '我尝试用短视频、直播等现代媒体来推广皮影文化，让更多的年轻人了解和喜欢上这门传统艺术。我还将皮影元素融入到现代设计中，开发了一系列文创产品，让皮影艺术走进日常生活。我认为，只有让更多的人了解和喜欢，皮影戏才能更好地传承下去。'
  }
]
</script>

<template>
  <div class="artists-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">传承艺人</h1>
      <p class="page-subtitle">守护光影艺术的匠人</p>
    </div>

    <!-- 引言部分 -->
    <section class="intro-section container">
      <p class="intro-text">
        皮影戏的传承和发展离不开一代又一代艺人的坚守和创新。这些传承人不仅精通皮影的制作和表演技艺，还致力于将这一传统艺术传承下去，让更多的人了解和喜爱皮影戏。
      </p>
      <p class="intro-text">
        以下是几位杰出的皮影戏传承人，他们用自己的一生守护着这门古老的艺术，为传统文化的传承做出了重要贡献。
      </p>
    </section>

    <!-- 艺人展示 -->
    <section class="artists-section container">
      <div class="artists-grid">
        <div v-for="artist in artists" :key="artist.id" class="artist-card" @click="openArtistDetail(artist)">
          <div class="artist-image">
            <img :src="artist.image" :alt="artist.name" class="profile-image" />
          </div>
          <div class="artist-info">
            <h3 class="artist-name">{{ artist.name }}</h3>
            <p class="artist-title">{{ artist.title }}</p>
            <p class="artist-region">{{ artist.region }}</p>
            <div class="view-more">
              <span>查看详情</span>
              <i class="arrow-icon">→</i>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 艺人访谈 -->
    <section class="interview-section">
      <div class="container">
        <h2 class="section-title">艺人访谈</h2>
        <div class="interviews-container">
          <div v-for="interview in interviews" :key="interview.id" class="interview-item">
            <div class="interview-header">
              <h3 class="interviewee">{{ interview.artist }}</h3>
              <p class="question">{{ interview.question }}</p>
            </div>
            <div class="interview-answer">
              <p class="answer-text">{{ interview.answer }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 传承故事 -->
    <section class="story-section container">
      <h2 class="section-title">传承故事</h2>
      <div class="story-content">
        <div class="story-text">
          <h3 class="story-title">坚守与创新</h3>
          <p class="story-paragraph">
            每一位皮影戏传承人都有自己的故事，他们的从艺之路充满了艰辛和挑战，但也收获了荣誉和成就。他们不仅要掌握复杂的制作和表演技艺，还要面对传统艺术在现代社会的生存和发展问题。
          </p>
          <p class="story-paragraph">
            许多传承人从十几岁开始学习皮影，一做就是几十年甚至一辈子。他们用自己的双手创造出精美的皮影作品，用精彩的表演赢得观众的喜爱。同时，他们也在不断探索创新，让传统艺术适应现代社会的需求。
          </p>
          <p class="story-paragraph">
            更令人欣慰的是，越来越多的年轻人开始关注和学习皮影艺术，他们为这门古老的艺术注入了新的活力。在传承人的带领下，皮影戏正在以新的方式走进人们的生活，焕发出新的生机。
          </p>
        </div>
        <div class="story-image">
          <img src="https://picsum.photos/id/226/600/800" alt="传承故事" class="featured-image" />
        </div>
      </div>
    </section>

    <!-- 艺人详情模态框 -->
    <div v-if="selectedArtist" class="modal-overlay" @click.self="closeArtistDetail">
      <div class="modal-content">
        <button class="close-button" @click="closeArtistDetail">×</button>
        <div class="modal-body">
          <div class="modal-image">
            <img :src="selectedArtist.image" :alt="selectedArtist.name" class="detail-image" />
          </div>
          <div class="modal-info">
            <h2 class="modal-name">{{ selectedArtist.name }}</h2>
            <p class="modal-title">{{ selectedArtist.title }}</p>
            <p class="modal-region">{{ selectedArtist.region }}</p>
            <div class="modal-profile">
              <h3 class="profile-title">人物简介</h3>
              <p class="profile-text">{{ selectedArtist.profile }}</p>
            </div>
            <div class="modal-achievements">
              <h3 class="achievements-title">主要成就</h3>
              <ul class="achievements-list">
                <li v-for="(achievement, index) in selectedArtist.achievements" :key="index" class="achievement-item">
                  {{ achievement }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 页面头部 */
.page-header {
  background-color: var(--color-secondary);
  color: white;
  text-align: center;
  padding: 3rem 2rem;
}

.page-title {
  font-size: 3rem;
  margin: 0 0 1rem 0;
  color: var(--color-accent);
  font-family: 'STZhongsong', serif;
}

.page-subtitle {
  font-size: 1.5rem;
  margin: 0;
  opacity: 0.9;
}

/* 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--color-heading);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--color-primary);
}

/* 引言部分 */
.intro-text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--color-text-light);
}

/* 艺人展示 */
.artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.5rem;
}

.artist-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.artist-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.artist-image {
  height: 400px;
  overflow: hidden;
}

.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.artist-card:hover .profile-image {
  transform: scale(1.03);
}

.artist-info {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.artist-name {
  font-size: 1.6rem;
  color: var(--color-secondary);
  margin: 0 0 0.5rem 0;
}

.artist-title {
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 0.3rem 0;
  font-weight: 500;
}

.artist-region {
  font-size: 0.9rem;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
}

.view-more {
  margin-top: auto;
  display: flex;
  align-items: center;
  color: var(--color-primary);
  font-weight: 500;
  transition: color 0.3s ease;
}

.view-more:hover {
  color: var(--color-secondary);
}

.arrow-icon {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.artist-card:hover .arrow-icon {
  transform: translateX(5px);
}

/* 艺人访谈 */
.interview-section {
  background-color: var(--color-background-soft);
}

.interviews-container {
  max-width: 900px;
  margin: 0 auto;
}

.interview-item {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interview-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.interview-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-primary);
}

.interviewee {
  font-size: 1.4rem;
  color: var(--color-secondary);
  margin: 0 0 0.5rem 0;
}

.question {
  font-size: 1.1rem;
  color: var(--color-text);
  font-weight: 500;
  margin: 0;
}

.answer-text {
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0;
  font-style: italic;
}

/* 传承故事 */
.story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.story-title {
  font-size: 1.8rem;
  color: var(--color-secondary);
  margin: 0 0 1.5rem 0;
}

.story-paragraph {
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0 0 1.5rem 0;
}

.featured-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  font-size: 2rem;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.close-button:hover {
  background-color: var(--color-background-soft);
}

.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.detail-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.modal-name {
  font-size: 2.2rem;
  color: var(--color-secondary);
  margin: 0 0 0.5rem 0;
}

.modal-title {
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 0.3rem 0;
}

.modal-region {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0 0 2rem 0;
}

.profile-title,
.achievements-title {
  font-size: 1.4rem;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
}

.profile-text {
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0 0 2rem 0;
}

.achievements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.achievement-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-light);
}

.achievement-item:last-child {
  border-bottom: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.2rem;
  }
  
  .page-subtitle {
    font-size: 1.2rem;
  }
  
  .artists-grid {
    grid-template-columns: 1fr;
  }
  
  .story-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .modal-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .modal-name {
    font-size: 1.8rem;
  }
}
</style>